{% load i18n static %}
<!DOCTYPE html>
<html xmlns="html://www.w3.org/1999/xhtml" lang="en" dir="ltr" xml:lang="en">
    <head>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
        <meta name="description" content="PyScada html5 client application"/>
        <meta name="author" content="Martin Schroeder"/>

        <title>{% block title %}{% endblock %}</title>
        <!-- Bootstrap core CSS -->
        <link href='{% static "pyscada/css/bootstrap/bootstrap.min.css" %}' rel="stylesheet"/>
        <!-- Bootstrap theme -->
        <link href='{% static "pyscada/css/bootstrap/bootstrap-theme.min.css" %}' rel="stylesheet"/>
        <!-- Bootstrap switch -->
        <link href='{% static "pyscada/css/bootstrap/bootstrap-switch.min.css" %}' rel="stylesheet">
        <!-- Bootstrap theme -->
        <link href='{% static "pyscada/css/jquery-ui/jquery-ui.min.css" %}' rel="stylesheet"/>
        <!-- Bootstrap theme -->
        <link href='{% static "pyscada/css/jquery-ui/jquery-ui.theme.min.css" %}' rel="stylesheet"/>
        <!-- Custom styles for this template -->
        <link href='{% static "pyscada/css/pyscada/pyscada-theme.css" %}' rel="stylesheet"/>
        {% block head_css %}{% endblock %}

        <link rel="icon" href='{% static "pyscada/img/favicon.ico" %}' type="image/x-icon">
    </head>
    <body {% block body_confic_data %} {% endblock %}>
        <div id="wrap" {% block wrap_config %} {% endblock %}>
            {% block navbar %}
            <!-- Fixed navbar -->
            <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
                <div class="container">
                    <div class="navbar-header">
                        {% block navbar_logo %}{% endblock %}
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                        <a  class="navbar-brand" target="{{ link_target }}" href="{% url 'view-overview'%}">PyScada</a>
                    </div>
                    <div class="navbar-collapse collapse">
                        <ul class="nav navbar-left navbar-nav">
                            {% block top_menu_left %}{% endblock %}
                            {% block top_menu_left_collapsed %}{% endblock %}
                        </ul>
                        <ul class="nav navbar-right navbar-nav">
                            {% block top_menu_right %}{% endblock %}
                            {% if user.pk %}
                            <li class="dropdown"><!-- User -->
                                <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon  glyphicon-user"></span> {% if user.first_name %}{{ user.first_name }} {{ user.last_name }}{% else %}{{ user.username }}{% endif %}<b class="caret"></b></a>
                                <ul class="dropdown-menu" style="min-width: 0px;">
                                    {% if user.is_staff %}
                                    <li><a href="{% url 'pyscada_admin:index' %}" target="{{ link_target }}">Admin</a></li>
                                    <li class="divider"></li>
                                    {% endif %}
                                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">{{ user.first_name }} {{ user.last_name }}</a></li>
                                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">{{ user.email }}</a></li>
                                    <li role="presentation" class="disabled"><a role="menuitem" tabindex="-1" href="#">Change user info</a></li>
                                    <li class="divider"></li>
                                    <li role="presentation" class="refresh-rate-li hidden">
                                        <div style="padding: 3px 20px;">
                                            <span>Data refresh rate: </span>
                                            <span class="refresh-rate-output"></span>
                                            <span> ms</span>
                                            <input class="refresh-rate-input" type="range" min="100" max="5000" step="100" value="2500">
                                        </div>
                                    </li>
                                    <li class="refresh-rate-divider divider hidden"></li>
                                    <li><a href="/accounts/password_change" target="{{ link_target }}"> Change password</a></li>
                                    <li class="divider"></li>
                                    <li><a href="/accounts/logout"> Logout</a></li>
                                </ul>
                            </li>
                            {% endif %}
                            <!--<li><a href="#page-help">Help</a></li>-->
                            <li>
                                <a href="javascript:;" style="padding-left:0px; padding-right:0px;width:40px;height:30px;display: none;"><img class="loadingAnimation" style="display: inline-block; height: 14px;" src="/static/pyscada/img/load.gif" alt="loading" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Initialisation"></a>
                            </li>
                            <li class="AutoUpdateButtonParent" style="width:100px;height:30px;padding-top: 15px;margin-right:-25px;display: none;">
                                <input class="AutoUpdateButton hidden" type="checkbox" data-inverse="true" data-size="mini" data-on-color="success" data-off-color="default" checked>
                            </li>
                            <li style="width:40px;height:30px;display: none;">
                                <a href="javascript:;" ><span class="ReadAllTask glyphicon glyphicon-refresh" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Send request data to all devices"></span></a>
                            </li>
                            <li style="width:40px;height:40px;display: none;">
                                <a href="javascript:;" ><span class="AutoUpdateStatus glyphicon glyphicon-transfer" data-toggle="tooltip" data-placement="bottom" title="" data-original-title="Data transfer"></span></a>
                            </li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div>
            </div>
            {% endblock %}
            <div class="container" id="content">
                {% block top_area %}{% endblock %}
                <!-- loading animation -->
                <div id="notification_area"></div>
                <div id="notification_area_2"></div>
                {% block content %}{% endblock %}
            </div> <!-- /container -->
        </div>
        <footer class="footer">
        <span class="pull-left">{% if version_string %}PyScada Version: {{version_string}}{% endif %}</span>
        {% block footer_left %}{% endblock %}
        <span class="pull-right server_time"></span>
        </footer>
        <canvas id="myCanvas" width="30" height="15" style="display:none"></canvas>
        <!-- Bootstrap core JavaScript
        ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script type="text/javascript" src='{% static "pyscada/js/jquery/jquery.min.js" %}'></script>
        <script type="text/javascript" src='{% static "pyscada/js/jquery-ui/jquery-ui.js" %}'></script>
        <script type="text/javascript" src='{% static "pyscada/js/jquery/jquery.cookie.js" %}'></script>
        <script type="text/javascript" src='{% static "pyscada/js/bootstrap/bootstrap.min.js" %}'></script>
        <script type="text/javascript" src='{% static "pyscada/js/bootstrap/bootstrap-switch.min.js" %}'></script>
        {% block include_bottom %}{% endblock %}

        <script>
        {% block script_bottom %}{% endblock %}
        </script>
        <div id='tooltip'></div>
    </body>
</html>
